<template>

  <div>


    <el-row>
      <el-col :span="2" class="title">
        昵称
      </el-col>
      <el-col :span="10">
        <el-input v-model="searchForm.nickName" placeholder=" 昵称" clearable></el-input>


      </el-col>

      <el-col :span="2" :offset="1">
        <el-button type="primary" @click="search">搜索</el-button>
      </el-col>
    </el-row>


    <el-row>
      <el-button type="primary" plain @click="handlerAdd">添加</el-button>
    </el-row>


    <el-table
        :data="tableData"
        style="width: 100%" border
        size="mini"
    >

      <el-table-column align="center"
                       prop="userName"
                       label="用户名"
                       width="180">
      </el-table-column>
      <el-table-column align="center"
                       prop="nickName"
                       label="昵称"
      >
      </el-table-column>
      <el-table-column align="center"
                       prop="email"
                       label="用户邮箱"
      >
      </el-table-column>
      <el-table-column align="center"
                       prop="phonenumber"
                       label="手机号"
      >
      </el-table-column>
      <el-table-column align="center"
                       prop="loginIp"
                       label="最后登录IP"
      >
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>


          <el-button
              size="mini"
              type="primary"
              @click="handleUserRole(scope.$index, scope.row)">授权
          </el-button>
        </template>
      </el-table-column>


    </el-table>


    <el-pagination
        background
        layout="total, prev, pager, next"
        :current-page.sync="searchForm.current"
        :total="result.total"
        :page-size="searchForm.size"
        @current-change="changeCurrent"
    >
    </el-pagination>


    <!-- 添加或者修改的样式 -->


    <el-dialog
        title="添加|修改111"
        :visible.sync="dialogVisible"

        width="700px"
    >

      <el-form ref="form" :model="form" label-width="80px" v-if="dialogVisible">
        <el-form-item label="用户名">
          <el-input v-model="form.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="form.password" key="password"></el-input>
        </el-form-item>

        <el-form-item label="昵称">
          <el-input v-model="form.nickName" key="nickName"></el-input>
        </el-form-item>
        <el-form-item label="头像">
          <el-input v-model="form.avatar" key="avatar"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email" key="email"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.phonenumber" key="phonenumber"></el-input>
        </el-form-item>
        <el-form-item label="性别（0，1,2）">
          <el-input v-model="form.sex" :key="formKey"></el-input>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="saveOrUpdate">保存</el-button>
        </el-form-item>


      </el-form>


    </el-dialog>


    <el-dialog
        title="授权"
        :visible.sync="dialogVisible1"

        width="700px"
    >

      <UserRole :userId="userId"  :dialogVisible1.sync="dialogVisible1"></UserRole>


    </el-dialog>

  </div>


</template>

<script>

import axios from 'axios'
import request from '@/utils/request'
import edit from './user_role'
import UserRole from "@/views/system/user/user_role";

export default {

  name: 'User',
  components: {
      UserRole
  },
  data() {
    return {
      tableData: [],
      result: {
        total: 0
      },
      searchForm: {
        current: 1,
        size: 10,
        nickName: ''
      },
      //添加或修改 的表单
      form: {
        userName: '',
        nickName: '',
        email: '',
        phonenumber: '',
        sex: '',
        avatar: '',
        password: '',


      },
      userNameKey: 'abc',
      dialogVisible: false,
      dialogVisible1: false,
      userId:null,

    }
  },
  methods: {
    queryList() {

      request({
        method: 'get',
        url: '/sysUser/page?current=' + this.searchForm.current + '&size=10&nickName=' + this.searchForm.nickName,
      }).then(page => {
        //res axios封装的结果
        console.log("page", page);
        // res.data 是解析 controller返回的结果
        this.tableData = page.records;
        this.result.total = page.total;
      })


    },
    //当切换当前页号
    changeCurrent() {

      this.queryList();
    },
    search() {
      this.searchForm.current = 1;
      this.queryList();
    },

    saveOrUpdate() {
      console.log("this.form", this.form)


      request({
        method: 'post',
        url: '/sysUser/saveOrUpdate',
        data: this.form
      }).then(success => {
        if (success) {
          this.dialogVisible = false;
          this.$message('保存成功');
          this.search();
        }
      })

    },
    handlerAdd() {
      this.dialogVisible = true;
      // alert("单纯的true")
      this.resetFormData();
    },
    //重置表单
    resetFormData() {
      this.form = {
        userName: '',
        nickName: '',
        email: '',
        phonenumber: '',
        sex: '',
        avatar: '',
        password: '',
      }
    },
    //修改按钮
    handleEdit(index, row) {
      //查询，


      let id = row.userId;
      request({
        method: 'get',
        url: '/sysUser/getById/' + id
      }).then(form => {
        this.form = form;
        //打开dialog
        this.dialogVisible = true
      })


    },
    //删除按钮
    handleDelete(index, row) {
      let id = row.userId;

      this.$confirm('确认要删除数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {


        request({
          method: 'get',
          url: '/sysUser/removeById/' + id,
        }).then(form => {
          this.form = form;
          //打开dialog
          this.search();
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    //显示授权组件
    handleUserRole(index, row) {

      this.userId = row.userId;

      this.dialogVisible1 = true;
    }

  },
  created() {

    //组件初始化的时候查询

    this.queryList();


  }


}


</script>

<style>
.title {
  height: 40px;
  line-height: 40px;
}
</style>